<template>
  <div class="login-container">
    <div class="JPdom" ref="JPdom"></div>
    <div
      v-if="!notFound"
      class="login-center"
      ref="loginCenter"
      :style="{
        backgroundImage: `url(${loginBgUrl})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
      }"
    >
      <div class="login-data" v-show="name == '登录'">
        <header>账户登录</header>
        <el-form
          ref="loginForm"
          :model="form"
          :rules="rules"
          label-width="95px"
          size="default"
          label-position="top"
        >
          <!-- <el-form-item prop="teamid" label="团队ID" class="text-item">
            <el-input placeholder="团队ID" name="teamid" v-model="form.teamid">
            </el-input>
          </el-form-item> -->
          <el-form-item prop="phonenum" label="账号/手机号" class="text-item">
            <el-input
              placeholder="账号/手机号"
              name="phonenum"
              v-model="form.phonenum"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码" class="text-item">
            <el-input
              placeholder="密码"
              name="password"
              type="password"
              show-password
              v-model="form.password"
            >
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="" class="text-item">
            <el-radio-group v-model="roleName" @change="change">
              <el-radio :label="0" size="default" style="color: #fff;">学生</el-radio>
              <el-radio :label="1" size="default" style="color: #fff;">老师</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-row>
            <el-col :span="12" class="col m-0 p-0">
              <el-button
                class="login-btn"
                type="primary"
                size="large"
                @click="login(loginForm)"
                >登录</el-button
              >
            </el-col>
            <!-- <el-col :span="12">
                          <button class="btn d-block btn-login2" type="button" @click="name = '忘记密码'">z</button>
                      </el-col> -->
          </el-row>
        </el-form>
      </div>
      <!-- 忘记密码 -->
      <!-- <div class="login-data" v-show="name == '忘记密码'">
              <header>忘记密码</header>
              <div class="col" v-show="name == '忘记密码'">
                  <el-form ref="forgetref" :model="forget" label-width="95px" size="default" label-position="top">
                      <el-form-item class="text-item" label="手机号：" prop="phonenum">
                          <el-input placeholder="请输入手机号" name="phonenum" v-model="forget.phonenum"></el-input>
                      </el-form-item>
                      <el-form-item class="text-item" label="验证码：" prop="yzm">
                          <div class="row m-0">
                              <div class="col p-0">
                                  <el-input placeholder="四位验证码" v-model="forget.yzm"></el-input>
                              </div>
                              <div class="col pr-0">
                                  <button class="d-block btn-login1 btn" @click.stop.prevent="click2"
                                      :disabled="time2 !== 60" v-text="time2 == 60 ? '验证码' : time2"></button>
                              </div>
                          </div>
                      </el-form-item>
                      <el-form-item class="text-item" label="新密码：" prop="password">
                          <el-input placeholder="请输入新密码" name="newpassword" type="password"
                              v-model="forget.password"></el-input>
                      </el-form-item>
                      <el-row>
                          <el-col :span="12" class="col m-0 p-0">
                              <button class="btn btn-login1" type="button" @click="forgetpassword">修改密码</button>
                          </el-col>
                          <el-col :span="12">
                              <button class="btn d-block btn-login2" type="button" @click="name = '登录'">返回登录</button>
                          </el-col>
                      </el-row>

                  </el-form>
              </div>
          </div> -->
    </div>
    <div v-else class="not-found">
      <span>团队不存在</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElForm, ElMessage, FormInstance } from "element-plus";
import JParticles, { Particle } from "jparticles";
import { inject, onMounted, onUnmounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { asyncgetteam, asynclogin } from "../../api/index";
import { getThirdLevelDomain } from "../../util/data";
const router = useRouter();

// 码客行

// 0 学生  1 老师
const name = ref("登录");

const form = reactive({
  password: "",
  phonenum: "",
  teamid: "",
});
const teamid = ref();
const loginForm = ref<FormInstance>();
const rules = ref({
  phonenum: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      message: "手机号不合法",
      regexp: /^1[3456789]\d{9}$/,
      trigger: "blur",
    },
  ],
  // teamid: [
  //   { required: true, message: "请输入团队ID", trigger: "blur" },
  // ],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
async function login(loginForm: FormInstance | undefined) {
  if (!loginForm) return;
  const { phonenum, password } = form;
  loginForm.validate(async (valid) => {
    if (valid && teamid.value) {
      try {
        await asynclogin({ ID: phonenum, password, teamid: teamid.value });
        ElMessage.success("登录成功");
        router.push({ name: "Home" });
      } catch (e: any) {
        console.log("catch login error=>", e);
        ElMessage.error(String(e));
      }
    } else {
      console.log("表单验证失败,teamid=>", teamid.value);
    }
  });
}
//
const notFound = ref(false);
const loginCenter = ref();
const loginBgUrl = ref(
  "https://cdn.hterobot.com/image/xinhuashudianlogin.jpg"
);
// 获取团队登录背景图
async function getTeamInfo() {
  const obj = getThirdLevelDomain();
  try {
    let { other, ID } = await asyncgetteam(obj);
    if (other?.loginBgUrl) {
      loginBgUrl.value = other?.loginBgUrl;
    }
    teamid.value = ID;
    if (!teamid.value) {
      // 团队不存在
      notFound.value = true;
    }
  } catch (error) {
    console.error("getTeamInfo asyncgetteam err=>", error);
    notFound.value = true;
    // ElMessage.error(error);
  }
}

// 背景图
const JPdom = ref();
const jpdata = ref<Particle>();
function jp() {
  if (JPdom.value) {
    jpdata.value = new JParticles.Particle(JPdom.value, {
      color: "#fff",
      proximity: 90,
      range: 100,
      num: 0.1,
      maxR: 2.4,
      minR: 0.6,
      maxSpeed: 0.8,
      minSpeed: 0.1,
    });
  }
}
const tenant_id = inject<string | undefined>("tenant_id", undefined);
onMounted(() => {
  // 码客行只能从学生端跳转
  if (tenant_id === "马克行") {
    const { origin, pathname, search, hash } = window.location;
    // 替换路径中的 'acCoderSaasMgmt' 为 'acCoderSaas'
    const newPathname = pathname.replace("acCoderSaasMgmt", "acCoderSaas");
    // 更新地址栏并保留查询参数和哈希值
    window.location.href = `${origin}${newPathname}${search}${hash}`;
    return;
  }
  getTeamInfo();
  jp();
});
onUnmounted(() => {
  jpdata.value?.onDestroy();
  jpdata.value = undefined;
});

// 忘记密码
// 验证码
</script>

<style scoped>
.login-container {
  display: grid;
  height: 100vh;
  width: 100vw;
  align-content: center;
  position: relative;
  overflow: hidden;
  margin-top: -10px;

  --el-radio-text-color: #fff;
}

.not-found {
  position: relative;
  text-align: center;
  color: var(--sass-color-blue);
  font-weight: bolder;
  font-size: 50px;
}

.login-center {
  width: 932px;
  height: 540px;
  background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/guanwang/science2.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin: auto;
  box-shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18),
    0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  z-index: 1;
  display: flex;
}

.login-data {
  width: 442px;
  padding: 48px;
  color: #fff;
  --color-43: #fff;
}

.login-data header {
  font-weight: 700;
  font-size: 36px;
  margin-bottom: 48px;
}

/* 登录按钮 */
.login-btn {
  width: 148px;
  border-radius: 4px;
  /*  */
  margin-top: 20px;
}

/* 忘记密码 */
.forget-pwd {
  width: 148px;
  border-radius: 4px;
  /*  */
  margin-top: 20px;
  color: #fff !important;
}

.btn-login1 {
  width: 148px;
  color: #fff;
  background: #1b3694;
  border-radius: 2px;
}

.btn-login2 {
  width: 148px;
  color: #fff;
  background: #17b44c;
  border-radius: 2px;
}

.btn-login3 {
  width: 148px;
  color: #fff;
  background: #17b44c;
  border-radius: 2px;
}

.text-item {
  margin-bottom: 24px;
  color: #fff;
}

.JPdom {
  position: fixed;
  height: calc(100vh + 64px);
  width: 100vw;
  background-color: var(--sass-color-blue3);
}

.login-text {
  margin-left: 48px;
  width: 217px;
  height: 33px;
  background: #164065;
  text-align: center;
  box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1);
  color: #fff;
  line-height: 32px;
  margin-top: 140px;
}
</style>

<style>
#app.ojSass .login-container .login-btn:hover {
  color: #fff !important;
  border-color: #fff !important;
  background-color: rgba(0, 0, 0, 0) !important;
  outline: 0;
}

#app.ojSass .login-container .el-button.is-text:not(.is-disabled):focus,
.el-button.is-text:not(.is-disabled):hover {
  background-color: transparent !important;
}
</style>
